<template>
  <d2-container  :class="{'page-compact':crud.pageOptions.compact}" >
   <crud-container class="d2-container-wrapped" >
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      v-on="_crudListeners"
      @deploy-task="taskdeploy"
    >

       <div slot="header">
         <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch"  />
         <el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
         <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners"/>
       </div>

       <template slot="FormBodyAppendSlot" slot-scope="scope">
         <div class="d2-mt-10" v-if="scope.mode!=='view'">
           <el-button @click="addColumn(scope)">添加模块</el-button>
         </div>
         <div class="d2-mt-20">
           <el-form-item label="非配置字段" prop="noConfigProp">
             <el-input v-model="scope.form.noConfigProp"></el-input>
           </el-form-item>
         </div>
         全部row字段数据：{{scope.row}}
       </template>

     </d2-crud-x>
   </crud-container>
  </d2-container>
</template>

<script>
import { AddObj, DelObj, GetList, UpdateObj } from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'

export default {
  name: 'formAddi',
  components: {},
  mixins: [d2CrudPlus.crud],
  data () {
    return {
    }
  },
  methods: {
    reComputeCrudHeight () {

    },
    getCrudOptions () {
      return crudOptions
    },
    async pageRequest (query) {
      return GetList(query)
    },
    async addRequest (row) {
      return AddObj(row)
    },
    async updateRequest (row) {
      return await UpdateObj(row)
    },
    async delRequest (row) {
      return await DelObj(row.id)
    },
    addIndex () {
      if (this.addIndexValue == null) {
        this.addIndexValue = 0
      }
      this.addIndexValue++
      return this.addIndexValue
    },
    addColumn (scope) {
      const key = 'module' + Math.floor(Math.random() * 1000)
      const column = {
        title: '模块' + this.addIndex(),
        key: key,
        component: {
          name: 'dict-select',
          props: {
            dict: {
              value: 'name',
              url (dict, { form, component }) {
                if (form.project != null) {
                  console.log(3333)
                  return '/api/devops/module/?limit=999&project=' + form.project
                }
                console.log(444444)
                return undefined
              }
            }
          },
          span: 12
        }
      }
      this.$set(this.getEditFormTemplate(), key, column)
      this.$set(this.getEditForm(), key, undefined)
      console.log('add', this.getEditFormTemplate(), this.getEditForm())
    },
    configText (scope) {
      const template = this.getEditFormTemplate('text')
      template.component = {
        name: 'dict-select',
        props: {
          dict: { value: 'value', label: 'label', data: [{ value: '1', label: '打开' }, { value: '0', label: '关闭' }] }
        },
        span: 12
      }
    }
  }
}
</script>
